<!--#ifdef H5 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '',
  },
}
</route>
<!-- #endif -->
<script setup lang="ts">
import searchIcon from '@/static/images/comment/search.png'
import arrowRight from '@/static/images/sys/arrow-right.png'
import historyMessageHooks from '@/hooks/historyMessageHooks'
import { ParentListModel } from '@/models/historyMessageModels'
import NotData from '@/components/NotData.vue'
import { avatarUrl } from '@/utils'

const { parentListModelList, ...callback } = historyMessageHooks()
const searchText = ref()
const isSelect = ref(false)
const paging = ref()
const listData = ref<ParentListModel[]>([])

onMounted(() => {
  // paging.value.refresh()
})

onLoad((option) => {
  isSelect.value = option.isSelect
  if (isSelect.value) {
    uni.setNavigationBarTitle({ title: '请选择家长' })
  } else {
    uni.setNavigationBarTitle({ title: '历史沟通记录' })
  }
})

function search() {
  paging.value.refresh()
}

async function query(page: number, per_page: number) {
  const listData = await callback.crmContacts(searchText.value, page, per_page)
  paging.value.complete(listData)
}

function jumpPage(item: ParentListModel) {
  if (isSelect.value) {
    uni.$emit('selectParent', { parentName: item.nickname, parentId: item.id })
    uni.navigateBack()
  } else {
    const url = `/pages/history/historyPage?id=${item.id}`
    uni.navigateTo({
      url,
    })
  }
}
</script>

<template>
  <view style="position: relative; padding: 32rpx; background: #f8f9fb">
    <view
      class="search-parent-style mb-4"
      style="position: sticky; top: 32rpx; align-items: center"
    >
      <input
        type="text"
        class="search-style"
        v-model="searchText"
        :maxlength="50"
        confirm-type="search"
        @confirm="search"
        placeholder="请输入家长微信昵称/备注名/电话"
      />

      <view style="padding: 20rpx; margin-right: 12rpx" @click="search">
        <wd-img :src="searchIcon" :width="24" :height="24" mode="widthFix" />
      </view>
    </view>
    <view class="scroll-views">
      <z-paging
        ref="paging"
        loading-more-no-more-text="- 没有更多数据了 -"
        v-model="listData"
        :fixed="false"
        @query="query"
      >
        <template #empty>
          <NotData text="暂无数据"></NotData>
        </template>
        <view class="list" v-for="item in listData" :key="item">
          <view class="round-corners linear-hor mt-2" @click="jumpPage(item)">
            <view>
              <wd-img :width="36" :height="36" :radius="6" :src="avatarUrl(item.avatar)"></wd-img>
            </view>
            <view style="width: 24rpx" />
            <view>
              <wd-text :text="item.nickname" color="#2B2F36" size="16" :lines="1"></wd-text>
            </view>
            <span class="spacer" />
            <wd-text :text="item.mobile" color="#6A707C" size="14"></wd-text>
            <view>
              <wd-img :src="arrowRight" :width="20" :height="20"></wd-img>
            </view>
          </view>
        </view>
        <view class="h-10"></view>
      </z-paging>
    </view>
  </view>
</template>

<style scoped lang="scss">
.scroll-views {
  position: sticky;
  height: calc(100vh - 240rpx);
}

.search-style {
  width: 100%;
  height: 88rpx;
  padding: 0 32rpx;
  font-size: 28rpx;
  border-radius: 16rpx;
}

.search-parent-style {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background: #ffffff;
  border: 1rpx solid #2b2f36;
  border-radius: 16rpx;
}

.round-corners {
  background: white;
  border-radius: 16rpx;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
}

.spacer {
  flex-grow: 1;
}
</style>
